<template>
  <div class="">
    <el-card class="box-card">
      <el-input
        v-model="searchData"
        placeholder="请输入用户ID"
        prefix-icon="el-icon-search"
        @keyup.enter.native="searchEnterFun"
      />
    </el-card>
    <el-card class="list-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="创建时间">
                <span>{{ props.row.createDate }}</span>
              </el-form-item>
              <el-form-item label="订单地址">
                <span>{{ props.row.addressInfo }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="订单 ID" prop="orderId" />
        <el-table-column label="订单金额" prop="orderTotal" />
        <el-table-column label="订单状态" prop="orderStatus" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getUserOrder, delGoods } from '../../api/user'
export default {
  data() {
    return {
      tableData: [],
      searchData: '',
      orderList: []
    }
  },
  mounted() {},
  methods: {
    deleteRow(index, rows) {
      console.log(index, rows)
      const data = {
        productId: rows[index].productId
      }
      console.log(data)
      delGoods(data).then((res) => {
        rows.splice(index, 1)
      })
    },
    searchEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode === 13 && this.searchData) {
        const postData = {
          _id: this.searchData
        }
        getUserOrder(postData).then((res) => {
          this.tableData = res.data.list[0].orderList
          console.log(this.tableData)
        })
      }
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
  width: 1280px;
  height: 80px;
}

.list-card {
  margin: 20px;
  width: 1280px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
